<template>
  <q-page class="row">
    <div class="q-pa-md  items-center  col-12">
      <q-splitter
        v-model="splitterModel"
        :limits="[0, 20]"
        :horizontal="!tabDirection"
      >
        <template v-slot:before>
          <q-tabs
            v-model="tab"
            :vertical="tabDirection"
            :dense="tabDirection"
            class="text-primary"
            :breakpoint="1200"
          >
            <q-tab
              name="archive"
              icon="mdi-pencil-box-multiple-outline"
              label="文章"
            />
            <q-tab
              name="category"
              icon="mdi-order-bool-descending "
              label="分类"
            />
            <q-tab name="tag" icon="mdi-tag-multiple" label="标签" /> </q-tabs
        ></template>
        <template v-slot:after>
          <q-tab-panels
            v-model="tab"
            animated
            swipeable
            vertical
            transition-prev="jump-up"
            transition-next="jump-up"
          >
            <q-tab-panel name="archive">
              <div class="time-line " v-if="archive">
                <!-- 还行! 目前共计 {{ data.postCount }} 篇日志。 继续努力 -->
                <q-timeline color="primary" :layout="layout">
                  <div
                    class="time-line-year"
                    :style="headerLayout"
                    v-for="yearItem in archive"
                  >
                    <div class="year-title">
                      <q-icon :name="mdiCalendarMonthOutline" />
                      {{ yearItem.year }} 年【{{ yearItem.data.length }}】篇文章
                    </div>

                    <div
                      class="time-line-month"
                      :style="headerLayout"
                      v-for="monthItem in yearItem.data"
                    >
                      <div class="month-title">
                        {{ monthItem.month }}月【{{
                          monthItem.data.length
                        }}】篇文章
                      </div>

                      <q-timeline-entry v-for="item in monthItem.data">
                        <template v-slot:title>
                          <router-link v-ripple :to="`/article/${item.id}`">{{
                            item.title
                          }}</router-link>
                        </template>
                        <template v-slot:subtitle>
                          <q-icon :name="mdiClockTimeFive" />{{
                            item.createdAt
                          }}
                        </template>
                      </q-timeline-entry>
                    </div>
                  </div>
                </q-timeline>
              </div>
            </q-tab-panel>
            <q-tab-panel name="category">
              <div class="card-container">
                <div class="category-item" v-for="category in categories">
                  <span>
                    <router-link :to="`category/${category.categoryName}`">
                      {{ category.categoryName }}
                    </router-link>
                    （{{ category.postCount }}）
                  </span>
                </div>
              </div>
            </q-tab-panel>
            <q-tab-panel name="tag">
              <div class="card-container">
                <div class="tag-item" v-for="tag in tags">
                  <q-chip class="glossy" icon="mdi-tag-multiple">
                    <router-link :to="`tag/${encodeURIComponent(tag.tagName)}`">
                      {{ tag.tagName }}（{{ tag.postCount }}）
                    </router-link>
                  </q-chip>
                </div>
              </div></q-tab-panel
            >
          </q-tab-panels></template
        >
      </q-splitter>
    </div>
  </q-page>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import {
  mdiBook,
  mdiCalendarMonthOutline,
  mdiClockTimeFive
} from '@quasar/extras/mdi-v5';
import postApi from 'src/api/post/index';
@Component<ArchivePage>({
  components: {},
  created() {
    this.mdiBook = mdiBook;
    this.mdiCalendarMonthOutline = mdiCalendarMonthOutline;
    this.mdiClockTimeFive = mdiClockTimeFive;
  },
  async mounted() {
    const res = await postApi.getArchive();
    const { archive, categories, postCount, tags } = res.data;
    this.archive = archive;
    this.categories = categories;
    this.postCount = postCount;
    this.tags = tags;
    this.$store.dispatch('headerCover/Init', {
      visible: true,
      title: '文章归档',
      bgImg:
        'https://tva4.sinaimg.cn/large/0084aYsLly1ge7bivvvswj31hc0u078j.jpg',
      showArrow: false
    });
  }
})
export default class ArchivePage extends Vue {
  private archive: any[] = [];
  private categories: any[] = [];
  private postCount: number = 0;
  private tags: any[] = [];

  private mdiBook: any;
  private mdiCalendarMonthOutline: any;
  private mdiClockTimeFive: any;

  get headerLayout(): any {
    return this.$q.screen.lt.sm
      ? { textAlign: 'left' }
      : this.$q.screen.lt.md
      ? { textAlign: 'left' }
      : { textAlign: 'center' };
  }

  get layout(): any {
    return this.$q.screen.lt.sm
      ? 'dense'
      : this.$q.screen.lt.md
      ? 'comfortable'
      : 'loose';
  }

  get tabDirection(): any {
    return this.$q.screen.lt.sm || this.$q.screen.lt.md ? false : true;
  }

  private tab: string = 'archive';

  private splitterModel: number = 20;
}
</script>

<style lang="scss" scoped>
.icon-wrapper {
  width: 80px;
  .q-icon {
    width: 5rem;
    height: 5rem;
    opacity: 0.2;
  }
}
.time-line {
  .q-icon {
    margin-top: -2px;
  }
  .time-line-year {
    font-size: 20px;
    font-weight: 700;
    .year-title {
      margin-bottom: 15px;
    }
    .time-line-month {
      font-size: 16px;
      padding-left: 10px;
      font-weight: 600;
      margin-bottom: 20px;
      .month-title {
        margin-bottom: 10px;
      }
    }
  }
}
.card-container {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  .category-item {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    span {
      a {
        padding: 5px;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
      }
    }
  }
  .tag-item {
    display: flex;
    padding: 5px 10px;
    cursor: pointer;
  }
}
</style>
